<template>
	<view>
		<view class="abnormal-area" v-for="(item, index) in abnormalList.length && abnormalList" :key="'abnormal'+index">
			<view class="abnormal-desc">
				<view class="desc-note">{{item.locaNo}} {{item.locaName}}</view>
				<view class="desc-opts">
					<image v-if="!isEdit && inspection.inspMethod === 0" class="opt-img" src="../../../../../static/images/icon/edit.png" @click="editLoca(item)"></image>
					<image v-if="!isEdit && inspection.inspMethod === 0" class="opt-img" src="../../../../../static/images/icon/delete.png" @click="removeAbn(index)"></image>
					<image v-if="!isEdit && !item.dfNo" class="opt-img" src="../../../../../static/images/icon/defect.png" @click="registerDefect(item)"></image>
				</view>
			</view>
			<textarea class="abnormal-memo"
				:placeholder="$t('baseCommon.message.pleaseEnter', { title: '' })" 
				:maxlength="30" :width="100" :disabled="!!isEdit"
				v-model="item.abnormalMemo" auto-height />
		</view>
		<view class="defect-area" v-for="(item, index) in defectList.length && defectList" :key="'defect'+index" @click="viewDefect(item)">
			<image src="../../../../../static/images/icon/warn.png"></image>
			<text>{{item.defectLocaName}} {{item.defectDesp}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			inspection: {
				type: Object,
				default() {
					return {}
				}
			},
			isEdit: {
				type: String,
				default() {
					return ''
				}
			},
			mp: {
				type: Object,
				default() {
					return {}
				}
			}
		},
		data() {
			return {
				abnormalList: [],
				defectList: []
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				if(this.inspection.inspMethod === 1) {
					let abnormal = this.inspection.abnormalList.find(r => r.mpId == this.mp.mpId)
					if(abnormal) {
						this.abnormalList.push(abnormal)
						
						if(abnormal.dfNo) {
							this.defectList.push({
								defectId: abnormal.defectId,
								defectNo: abnormal.defectNo,
								defectLocaId: abnormal.defectLocaId,
								defectLocaNo: abnormal.defectLocaNo,
								defectLocaName: abnormal.defectLocaName,
								defectDesp: abnormal.defectDesp
							})
						}
					}
				} else {
					this.abnormalList = this.inspection.abnormalList
					this.defectList = this.inspection.abnormalList.filter(r => r.defectId)
				}
			},
			// 选择设备位置
			editLoca(item) {
				uni.navigateTo({
					url: '/pages/business/inspect/offline/selectLoca',
					events: {
						selectLoca(data) {
							if(data) {
								item.locaId = data.locaId
								item.locaNo = data.locaNo
								item.locaName = data.locaName
							}
						}
					}
				})
			},
			// 删除异常情况
			removeAbn(index) {
				this.$emit('remove', this.inspection, index)
			},
			// 登记缺陷
			registerDefect(item) {
				this.$emit('register', this.inspection, item)
			},
			// 查看缺陷
			viewDefect(item) {
				this.$emit('defect', item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.abnormal-area {
		width: 100%;
		margin-bottom: 10px;
		
		.abnormal-desc {
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.desc-note {
				margin: 5px 0;
			}
			
			.desc-opts {
				min-width: 75px;
				text-align: right;
				
				.opt-img {
					width: 20px;
					height: 20px;
					margin-left: 5px;
				}
			}
		}
		
		.abnormal-memo {
			border: 1px solid #ccc;
			width: 100%;
			height: 50px;
			padding: 5px;
			box-sizing: border-box;
			font-size: 14px;
		}
	}
	
	.defect-area {
		display: flex;
		align-items: center;
		font-size: 12px;
		margin-bottom: 10px;
		
		image {
			width: 20px;
			height: 20px;
			margin-right: 5px;
		}
	}
</style>